<template>
	<view>

		<view class="top-backgroup">
			<image src='/static/my-bg3.png' mode='widthFix' class='backgroud-image'>
			</image>
		</view>
		<view class="about__wrap">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<!-- 图标logo -->
						<view class="logo-pic" @click="jump('avatar')">
							<view class="logo-image tn-shadow" style="border-radius: 50%;overflow: hidden;">
								<view class="tn-shadow-blur" style="width: 120rpx;height: 120rpx;">
									<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="" style="width: 100%;height: 100%;"></image>
									<image v-else :src="userImg" mode="" style="width: 100%;height: 100%;"></image>
								</view>
							</view>
						</view>
						<view class="tn-padding-right tn-color-white">
							<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
								{{userInfo.realName}}
							</view>
							<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view
			class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-bottom-sm tn-margin-left-sm tn-margin-right-sm">

			<tn-list-view :card="true" unlined="all">
				<tn-list-cell :arrow="true">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact" @click="jump('pwd')">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
							<view class="tn-icon-password"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%;">
							<view class="tn-margin-left-sm">修改密码</view>
						</view>
					</button>
				</tn-list-cell>
				<!-- <tn-list-cell :arrow="true">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact" @click="jump('avatar')">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
							<view class="tn-icon-image"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%;">
							<view class="tn-margin-left-sm">修改头像</view>
						</view>
					</button>
				</tn-list-cell> -->
				<tn-list-cell :arrow="true">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback"
						@click="logout">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-3 tn-color-white">
							<view class="tn-icon-logout"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%;">
							<view class="tn-margin-left-sm">退出登录</view>
						</view>
					</button>
				</tn-list-cell>
			</tn-list-view>
		</view>

		<tn-modal v-model="show" content="确认退出登录吗？" :button="button" :maskCloseable="false" @click="clickBtn" />

	</view>
</template>

<script>
	import {
		logout
	} from '@/api/login.js'
  import {removeToken} from "@/utils/auth";
	export default {
		data() {
			return {
				userImg: '/static/login/logo.png',
				show: false,
				userInfo: {},
				button: [{
						text: '取消',
						backgroundColor: '#d4d4cd',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync("userInfo")
			this.userInfo = userInfo
		},
		methods: {
			logout() {
				this.show = true
			},
			clickBtn(e) {
				this.show = false
				if (e.index * 1 === 1) {
					logout().then(res => {
            removeToken()
						uni.removeStorageSync('userInfo')
						uni.navigateTo({
							url: '/pages/login/index'
						})
					})
				}

			},
			jump(url) {
				uni.navigateTo({
					url: `/pages/my/${url}/index`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */




	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
			margin-top: -230rpx;
		}
	}

	/* 页面 end*/

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
				}
			}
		}
	}
</style>
